<template>
  <h1>记录一个人的名字</h1>
  姓:<input type="text" v-model="person.firstName">
  <br/>
  名:<input type="text" v-model="person.lastName">
  <br/>
  <span>全名:{{ person.fullName }}</span>
  <br/>
  全名:<input type="text" v-model="person.fullName">
</template>

<script>
import {reactive,computed} from "vue";

export default {
  name: "my-demo",
  setup() {
    let person = reactive(
        {
          firstName:'张',
          lastName:'三'
    })
    //这里面写什么函数都无所谓 简写形式 数据不改变的情况下
    // person.fullName = computed(() => {
    //   return person.firstName + '-' + person.lastName;
    // })
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName;
      },
      set(value) {
        let nameArr = value.split('-');
        person.lastName = nameArr[1];
        person.firstName = nameArr[0];
      }
    })

    return {
      person
    }
  }
}
</script>

<style scoped>

</style>